<template>
  <Card>
    <div class="md:flex">
      <div :id="props.conditionName" :style="chartStyle"></div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card } from 'ant-design-vue';
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import { QueryMetricsConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
import { getLabeledMetricsValues } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { labelLineMap } from '../dashboard/apm/apm.data';

const props = defineProps([
  'page',
  'start',
  'end',
  'step',
  'conditionName',
  'serviceName',
  ' serviceInstanceName',
  'endpointName',
]);

// eslint-disable-next-line vue/no-setup-props-destructure
let lineChartName = props.conditionName;

let option = {
  title: {
    text: '',
    textStyle: {},
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true,
  },
  legend: {
    show: true,
    orient: 'vertcal',
    right: 0,
    data: [],
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [],
};

const chartStyle = ref('width: 800%; height: 450%');

const chartMap = {
  global: 'width: 800%; height: 450%',
  service: 'width: 800%; height: 150%',
  instance: 'width: 800%; height: 250%',
  endpoint: 'width: 800%; height: 250%',
};

const labelMap = {
  0: 'P50',
  1: 'P75',
  2: 'P90',
  3: 'P95',
  4: 'P99',
};
function ifDateUndefined(start: string, end: string, step: string) {
  let isStartUndefined = start == '' || start === null || start == undefined;
  let isEndUndefined = end == '' || end === null || end == undefined;
  let isStepUndefined = step == '' || step === null || step == undefined;
  if (isStartUndefined || isEndUndefined || isStepUndefined) {
    return true;
  }
  return false;
}

const generateOptions = (res, page, conditionName, titleConfig) => {
  let times = res.times;
  let values = res.values;

  let lineSeries: any[] = [];
  let labels: string[] = [];

  for (var key in values) {
    if ({}.hasOwnProperty.call(values, key)) {
      labels.push(labelMap[key]);
      lineSeries.push({
        name: labelMap[key],
        data: values[key],
        type: 'line',
        showSymbol: false,
      });
    }
  }

  let lineChartDom = document.getElementById(lineChartName);
  let myChart = echarts.init(lineChartDom);
  option.title.text = labelLineMap[page][conditionName].title;
  option.title.textStyle = titleConfig;
  option.legend.data = labels;
  option.xAxis.data = times;
  option.series.data = lineSeries;

  return [option, myChart];
};

const generateQueryMetricsConditionReq = (val, page, conditionName) => {
  let queryMetricsConditionReq: QueryMetricsConditionReq = {
    labels: ['0', '1', '2', '3', '4'],
    duration: {
      start: val[1],
      end: val[2],
      step: val[3],
    },
    condition: {
      name: conditionName,
      entity: {
        scope: labelLineMap[page][conditionName].scope,
        normal: true,
      },
    },
  };
  return queryMetricsConditionReq;
};

watch(
  () => [
    props.page,
    props.start,
    props.end,
    props.step,
    props.conditionName,
    props.serviceName,
    props.serviceInstanceName,
    props.endpointName,
  ],
  (val) => {
    if (!ifDateUndefined(val[1], val[2], val[3])) {
      let page = val[0];
      let conditionName = val[4];
      let serviceName = val[5];
      let serviceInstanceName = val[6];
      let endpointName = val[7];
      let titleConfig = {};

      chartStyle.value = chartMap[page];

      if (page === 'global') {
        titleConfig = {};
      } else {
        titleConfig = {
          color: '#666666',
          fontWeight: 'lighter',
          fontSize: 13,
        };
      }
      const queryMetricsConditionReq = generateQueryMetricsConditionReq(val, page, conditionName);

      if (serviceName !== null && serviceName != undefined && serviceName != '') {
        queryMetricsConditionReq.condition.entity.serviceName = serviceName;
      }

      if (
        serviceInstanceName !== null &&
        serviceInstanceName != undefined &&
        serviceInstanceName != ''
      ) {
        queryMetricsConditionReq.condition.entity.serviceInstanceName = serviceInstanceName;
      }

      if (endpointName !== null && endpointName != undefined && endpointName != '') {
        queryMetricsConditionReq.condition.entity.endpointName = endpointName;
      }

      getLabeledMetricsValues(queryMetricsConditionReq).then((res) => {
        const [option, myChart] = generateOptions(res, page, conditionName, titleConfig);
        option && myChart.setOption(option);
      });
    }
  },
  { immediate: true, deep: true }
);
</script>
